<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example: Street View Layer</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function() {
      var portland = new google.maps.LatLng(45.545573,-122.598326);
      var panoramaOptions = {
        position: portland,
        pov: {
          heading: 34,
          pitch: 10,
          zoom: 1
        }
      };
      var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
      var pos = panorama.getPosition();
        $("#locateform").submit( function() {
         var pos = panorama.getPosition();
         var pov = panorama.getPov();
         $('#locateinfo').text("Lat: " + pos.lat() + " lng: " + pos.lng() +
                            " Heading: " + pov.heading + 
                            " Pitch: " + pov.pitch +
                            " Zoom: " + pov.zoom);
         
         return false;
        });      
    });
    </script> 

  </head> 
  <body> 
    <div id="pano" style="position:absolute; left:10px; top: 8px; width: 1600px; height: 600px;"></div> 
    <div id="locatecontainer" style="position:absolute; left: 10px; top: 608px; width: 400px; height: 300px;">
    <form id="locateform">
      <input type="submit" value="Where am I?"/>
    </form>
      <div id="locateinfo">Basic info
      </div>
    </div>
  </body> 
</html> 
